{include file="common@base/meta" /}
<link rel="stylesheet" href="__STATIC__/dataTables/css/dataTables.bootstrap.min.css">
<link rel="stylesheet" href="__STATIC__/dataTables/buttons/css/buttons.dataTables.css">
<link rel="stylesheet" href="__STATIC__/dataTables/buttons/css/buttons.bootstrap.css">
<style>
  .thumb {
    width: 75px;
    min-height: 75px;
    max-height: 75px;
  }
  .thumb,.badge{
    cursor: pointer;
  }
</style>
<section>
  <div class="box box-primary">
    <div class="box-header with-border">
      <h3 class="box-title">文件上传</h3>
    </div>
    <div class="box-body">
      <div class="row">
        <div class="col-xs-6">
          <input type="file" name="file" id="uploadfile">
        </div>
      </div>
    </div>
  </div>
  <div class="box box-primary">
    <div class="box-header with-border">
      <h3 class="box-title">已上传文件</h3>
    </div>
    <div id="myTable" class="box-body">
      <div class="row">
        {foreach $rows as $row}
        <div class="col-xs-3">
          <div class="thumbnail">
            <img src="{$wwwPath}{$row.filepath}" alt="" class="img-responsive thumb">
            <div class="caption" style="text-align: center">
              <span class="badge"><i class="fa fa-check"></i></span>
              <input type="checkbox" class="hide" data-filepath="{$row.filepath}" data-fileid="{$row.id}"
                     data-originname="{$row.origin_name}">
            </div>
          </div>
        </div>
        {/foreach}

      </div>
    </div>
    <div class="box-footer">
      <div class="pull-right">{$rows->render()}</div>
    </div>
  </div>
</section>
{include file="common@base/footer-js" /}
<script>
  require(['bsupload_zh', 'layer_config'], function () {
    upload_config.uploadUrl = '{:url("upload")}';
    upload_config.maxFileCount = 5;
    upload_config.allowedFileExtensions = ['jpg', 'gif', 'png', 'jpeg'];
    $("#uploadfile").fileinput(upload_config);
    $("#uploadfile").on("fileuploaded", function (event, data, previewId, index) {
      var response = data.response;
      if (response.code == 0) {
        js_alert(response.msg);
        return false;
      }
      js_message(response, true);
    });
  });

  $(function () {
    $(".thumbnail").on("click", function () {
      var me = $(this), badge = me.find(".badge"),checkbox=me.find("input:checkbox");
      badge.toggleClass("bg-green");
      checkbox.prop("checked",!checkbox.prop("checked"));
    })
  });

</script>